<template>
	<Transition name="fade">
		<div @click="event" v-if="visible" class='confirm _card'>
			<div>confirm</div>
			<div>{{props.value}}</div>
		</div>
	</Transition>
</template>

<script setup lang="ts">
const props = defineProps({
	value:{
		type:String,
		default:'000'
	},
	unMount:{
		type:Function,
		required:true
	}
})
const visible:Ref<boolean> = ref(false)
const event = ()=>{
	visible.value = false
	props.unMount()
}
onMounted(()=>{
	visible.value = true
})
onUnmounted(()=>{
	console.log('销毁了');
})

</script>
<style lang="scss" scoped>
.confirm{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 200px;
  height: 200px;
  background-color: rgb(255, 178, 76);
}
.fade-enter-active,.fade-leave-active {
  transition: all 0.5s ease;
}
.fade-enter-from,.fade-leave-to{
  opacity: 0;
}
</style>